/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from "react";
import { ResultPage, Card, Button, Grid, CalendarPickerView, Popup } from "antd-mobile";
import styles from "./css/home.module.css";
import { LoopOutline, HeartOutline, MailOutline } from "antd-mobile-icons";
import { useDispatch, useSelector } from "react-redux";
import { jh, setDate } from "../../../store/slice/ticketSlice";
import { useNavigate } from "react-router-dom";
function index() {
  const start = useSelector((store) => store.ticket.start);
  const end = useSelector((store) => store.ticket.end);
  const date = useSelector((store) => store.ticket.date);
  const dispatch = useDispatch();
  const [visible5, setVisible5] = useState(false);
  let nav=useNavigate()
  return (
    <div>
      <ResultPage status="" title="" description="">
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={styles.row}>
            <span className={styles.start} onClick={()=>nav('/city/start')}>{start}</span>
            <LoopOutline fontSize={26} onClick={() => dispatch(jh())} />
            <span className={styles.end} onClick={()=>nav('/city/end')}>{end}</span>
          </div>
          <div className={styles.row}>
            <span
              className={styles.week}
              onClick={() => {
                setVisible5(true);
              }}
            >
              {date}
            </span>
          </div>
          <div className={styles.row}>
            <Button block color="primary" size="large">
              查询
            </Button>
          </div>
        </ResultPage.Card>
        <Popup
              visible={visible5}
              onMaskClick={() => {
                setVisible5(false)
              }}
              bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '40vh',
              }}
            >
              <CalendarPickerView onChange={(val)=>{
                dispatch(setDate(val))
                setVisible5(false)
              }} 
              min={Date.now()} max={Date.now()+29*24*60*60*1000}
              />
            </Popup>   
        <Card style={{ marginTop: 12 }}>
          <Grid columns={5} gap={8}>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <MailOutline />
                <div style={{ color: "#000" }}>邮箱</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>酒店</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles["grid-demo-item-block"]}>
                <HeartOutline />
                <div style={{ color: "#000" }}>车站大屏</div>
              </div>
            </Grid.Item>
          </Grid>
        </Card>
      </ResultPage>
    </div>
  );
}

export default index;
